// 侧栏菜单
var goods = $('.site-item');
var title = ''

for (var i = 0; i < data.length; i++) {
    var item = ''
    title = `  <h4>
          <a href="javascript:;">${data[i].title} </a>
                           </h4>`

    for (var j = 0; j < data[i].item.length; j++) {
        item += `  <div class="bar-list">
           <a href="javascript:;">${data[i].item[j]}</a>
                       </div>`

    }
    goods.eq(i).find('.bar-goods').prepend(item);
    goods.eq(i).find('.bar-goods').prepend(title);
}


var flag = 1;

$('.site-title').click(function () {
    if (flag == 1) {
        $('.site-list').css({
            'display': 'none'
        })
        flag = 2;
    } else {
        $('.site-list').css({
            'display': 'block'
        })
        flag = 1;
    }
})

// 轮播图
var img = $('.banner-content img');
var len = img.length;
var i = 0;

var timer = setInterval(a, 5000);
function a() {
    i++;
    if (i > len - 1) {
        i = 0;
    }
    img.eq(i).fadeIn(1500).siblings().fadeOut(1500);
    $('.banner-btn li').eq(i).addClass('banner-active').siblings().removeClass('banner-active');
}
$('.banner-left').click(function () {
    i--;
    if (i < 0) {
        i = len - 1;
    }
    img.eq(i).fadeIn(1500).siblings().fadeOut(1500);
    $('.banner-btn li').eq(i).addClass('banner-active').siblings().removeClass('banner-active');
})
$('.banner-right').click(function () {
    i++;
    if (i > len - 1) {
        i = 0;
    }
    img.eq(i).fadeIn(1500).siblings().fadeOut(1500);
    $('.banner-btn li').eq(i).addClass('banner-active').siblings().removeClass('banner-active');
})

$('.banner-btn li').click(function () {
    var i = $(this).index();
    img.eq(i).fadeIn(1500).siblings().fadeOut(1500);
    $('.banner-btn li').eq(i).addClass('banner-active').siblings().removeClass('banner-active');
})

$('.banner').hover(function () {
    clearInterval(timer);
}, function () {
    timer = setInterval(a, 5000);
})

// 我的易果下拉框
$('.my-hover').hover(function () {

    $('.yiguo').css({
        'display': 'block'
    })
}, function () {
    $('.yiguo').css({
        'display': 'none'
    });

})
// 二维码下拉框
$('.mobile-hover').hover(function () {

    $('.erweima').css({
        'display': 'block'
    })
}, function () {
    $('.erweima').css({
        'display': 'none'
    });

})
// 输入框聚焦
$('.search-input').focus(function () {
    $('.search-input').css({
        'background': 'white'
    })
})
$('.search-input').blur(function () {
    $('.search-input').css({
        'background': '#e0e0e0'
    })
})

// 三级联动
var str = '';
for (var i = 0; i < citylist.length; i++) {
    str += `<option value="${i}">${citylist[i].name}</option>`;
}
$('#province').html(str);

var str = '';
for (var i = 0; i < citylist[0].city.length; i++) {
    str += `<option value="'${i}">${citylist[0].city[i].name}</option>`;
}
$('#city').html(str);

var str = '';
for (var i = 0; i < citylist[0].city[0].area.length; i++) {
    str += `<option value="${i}">${citylist[0].city[0].area[i]}</option>`;
}
$('#area').html(str);

$('#province').change(function () {
    var index = $('#province').val();
    var str = '';
    for (var i = 0; i < citylist[index].city.length; i++) {
        str += `<option value="${i}">${citylist[index].city[i].name}</option>`;

    }
    $('#city').html(str);
    $('#city').trigger('change');

})

$('#city').change(function () {
    var index1 = $('#province').val();
    var index2 = $('#city').val();
    var str = '';

    for (var i = 0; i < citylist[index1].city[index2].area.length; i++) {
        str += `<option value="${i}">${citylist[index1].city[index2].area[i]}</option>`;

    }

    var city = citylist[index1].city[index2].name;
    $('.city-title').html(city);


    $('#area').html(str);

})

$('.city').hover(function () {
    $('.citylist').css({
        'display': 'block'
    })
}, function () {
    $('.citylist').css({
        'display': 'none'
    })
})

// 购物车
$('.shopping-cart').hover(function () {
    $('.shopping-list').css({
        'display': 'block'
    })
}, function () {
    $('.shopping-list').css({
        'display': 'none'
    })
})
$(function () {
    //渲染前三个
    var html = "";
    for (var q = 0; q < 3; q++) {
        html += `<div class="floor" id="F${q + 1}">
    <div class="floor-top clear">
        <h2>
            <a href="">
                <span>${pudata[q].top[0].i}</span>${pudata[q].top[0].title}
            </a>
        </h2>
        <span class="key">
            <a href="">${pudata[q].top[1].a}</a>
            <a href="">${pudata[q].top[1].b}</a>
            <a href="" class="last">${pudata[q].top[1].c}</a>
        </span>
    </div>
    <div class="floor-bottom clear">
        <div class="floor-left">
            <a href="erjiyemian.html">
                <img src="${pudata[q].bottom[0].img_url}" alt="">
            </a>
        </div>
        <div class="floor-right">
            <ul>
                <li><a href=""><img src="${pudata[q].bottom[1].img_url}" alt=""></a></li>
                <li><a href=""><img src="${pudata[q].bottom[2].img_url}" alt=""></a></li>
                <li class="dawide"><a href=""><img src="${pudata[q].bottom[3].img_url}" alt=""></a></li>
                <li class="dawide"><a href=""><img src="${pudata[q].bottom[4].img_url}" alt=""></a></li>
                <li><a href=""><img src="${pudata[q].bottom[5].img_url}" alt=""></a></li>
                <li><a href=""><img src="${pudata[q].bottom[6].img_url}" alt=""></a></li>
            </ul>
        </div>
    </div>
    </div>`
    }
    var con = $(".con");
    $(".qian").html(html);
    $(".qian").prependTo(con);
    //改变图标
    var spans = $(".floor .floor-top h2 span")
    // console.log(spans)
    for (var i = 0; i < spans.length; i++) {
        spans.eq(i).css({
            "background-position": -46 * i + "px"
        })
    }
    var as = $(".floor .floor-top h2 a")
    for (var i = 0; i < as.length; i++) {
        as.eq(i).css({
            "text-decoration": "none"
        })
    }
    as.eq(1).css({
        color: "#008842"
    })
    as.eq(2).css({
        color: "#f0c000"
    })
    //楼梯导航
    var lists = $(".mui-nav a")
    // $(".mui-nav a").hover(function () {
    //     var a = $(this).data("flag");
    //     if (!a) {
    //     } else {
    //         $(this).find("em").fadeIn(20)
    //     }
    // }, function () {
    //     var a = $(this).data("flag");
    //     if (!a) {
    //     } else {
    //         $(this).find("em").fadeOut(20)
    //     }
    // })
    function scroll() {
        $(document).scroll(function () {
            var scrollTop = $(document).scrollTop();
            if (scrollTop >= $("#F1").offset().top) {
                $(".mui-nav").css("display", "block");
                $(".uptop-up").css("display", "block")
            } else {
                $(".mui-nav").css("display", "none");
                $(".uptop-up").css("display", "none")
            }
            $(".floor").each(function (index, value) {
                if (scrollTop >= $(value).offset().top) {
                    id = $(value).attr("id").substr(1);
                }
                lists.eq(id).find("em").css({
                display: "block"
            }).parent().siblings().find("em").css({
                display: "none"
            })
            })
            // console.log(id)
            
        })
    }
    scroll();
    $(".mui-nav a").click(function (e) {
        e.preventDefault()
        $(document).off("scroll");
        // var that = this
        // $(this).removeClass("data-flag")
        $(this).find("em").css({
            display: "block"
        }).parent().siblings().find("em").css({
            display: "none"
        })
        var fs = $("#" + $(this).attr("class"));
        // console.log(fs)
        $("html,body").animate({
            "scrollTop": fs.offset().top - 10
        }, function () {
            scroll();
        });
    })
    //top向上
    $(".uptop-up").click(function () {
        $("html,body").animate({
            "scrollTop": $(".site-nav").offset().top
        });
    })
})
